<template>
	<view class="circle page">
		<status-bar title='我的发布' :goHome='fromShare'></status-bar>
		<view class="circleList" v-for='(item,index) in postList' :key='index' v-if='item.file_content||item.file_img'>
			<view class="circleTitle">{{item.addtime}}</view>
			<view class="circleContent">
				{{item.file_content}}
				<view class="ImgCont" v-if='item.file_img'>
					<image v-for='(pic,i) in item.file_img' :key='i' @click="previewimages(i,item.file_img)" :src="imgUrl+pic" mode="aspectFill"></image>
				</view>
			</view>
		</view>
		<empty v-if='nothing' type='1' cat='4' msg='啊哦 ~ 空空如也 <br>点击下方按钮即可发布内容'></empty>
		<view class="postEnter thmeBg" @click='toFt' :style="{'--color': color}">
			<image class="editorImg" :src="staticUrl+'/images/jh_up/icon-post1.png'"></image>
		</view>
		<showModel @cancelFunc='showModal = false' v-if='showModal' type='2'></showModel>
	</view>
</template>

<script>
	var that;
	export default {
		data() {
			return {
				color: getApp().globalData.color,
				showModal:false,
				bid: uni.getStorageSync('bid'),
				vid: '',
				nothing: false, // 暂无内容
				page: 1,
				postList: [], // 我的帖子
				imgUrl: this.imgUrl,
				staticUrl: this.staticUrl,
				fromShare:0, // 是否来自分享 1是 显示返回首页
			}
		},
		onShow() {
			that = this
			that.postList = []
			uni.getStorage({
				key: 'vid',
				success: function(res) {
					if(res.data){
						that.vid = res.data;
						that.myPosts(1);
					}else{
						// #ifdef H5
							uni.navigateTo({
								url:'/userPage/login/binding'
							})
						// #endif
						// #ifndef H5
							that.showModal = true
						// #endif
					}
				},
				fail() {
					// #ifdef H5
						uni.navigateTo({
							url:'/userPage/login/binding'
						})
					// #endif
					// #ifndef H5
						that.showModal = true
					// #endif
				}
			})
			// #ifdef H5
			this.H5Share()
			// #endif
			uni.setNavigationBarTitle({
				title: '我的'+getApp().globalData.postConfig.postTitle
			})
		},
		onShareAppMessage(option) {
			let shareData = uni.getStorageSync('shareData');
			let vid = uni.getStorageSync('vid');
			return {
				title: shareData.title,
				desc: shareData.desc,
				path: '/pages/index/index?share_v_id=' + vid+'&pageType=99',
				imageUrl: shareData.imageUrl
			}
		},
		onLoad(e) {
			// #ifdef H5
			this.H5Share('pageType=12','')
			// #endif
			if(e.fromShare){this.fromShare = e.fromShare}
				
		},
		methods: {
			toFt() {
				if (that.vid) {
					uni.navigateTo({
						url: '/otherPage/quanZ/post'
					})
				} else {
					// #ifdef H5
						uni.navigateTo({
							url:'/userPage/login/binding'
						})
					// #endif
					// #ifndef H5
						that.showModal = true
					// #endif
				}
			},
			previewimages: function(i, imgArry) {
				let imageUrls = [];
				for (let ind in imgArry) {
					imageUrls.push(that.imgUrl + imgArry[ind])
				}
				uni.previewImage({
					current: i,
					urls: imageUrls,
					indicator: "number",
					loop: true
				})
			},
			time(t) {
				return that.$common.timeFormat(t, 'Y-M-D')
			},
			myPosts(page) {
				// 3.我的圈子
				that.$http.post({
					url: '/zzjApp/myPosts',
					data: {
						bid: that.bid,
						v_id: that.vid,
						pageindex: page,
						pagecount: 10,
					}
				}).then(res => {
					that.nothing = false;
					if (res.data) {
						res.data.forEach((item, index) => {
							item.addtime = that.time(item.addtime)
							if (item.file_img)
								item.file_img = item.file_img.split(",")
						})
						that.postList = that.postList.concat(res.data);
						that.more = true
					} else {
						if (that.postList.length < 1) {
							that.nothing = true;
						}
						that.more = false
					}
				})
			}
		},
		onReachBottom() {
			if (that.more) {
				that.page += 1;
				that.myPosts(that.page);
			}
		}
	}
</script>

<style scoped="">
	.emptyPage{background: #F2F2F2;}
	.circle{width: 100%;height:100vh;background: #F2F2F2;overflow-x: hidden;overflow-y: auto;}
	.circleList,.circleContent{width: 100%;padding: 30upx;}
	.circleTitle{width: 100%;text-align: left;color: #666666;margin-bottom: 20upx;}
	.circleContent{background: #FFFFFF;color: #333333;overflow: hidden;}
	.circleContent .leftImage{width: 100upx;height: 100upx;float: left;}
	.circleContent .audio{width: 50%;position: relative;}
	.audioImage{width: 100%;}
	.audio text{position: absolute;right: 10upx;z-index: 5;color: #CCCCCC;font-weight: 100;transform: translateY(-50%);top: 50%;}
	.circleRigth{float: right;width: 480upx;}
	.emptyPage {
		background: #F2F2F2;
	}

	.circle {
		width: 100%;
		height: 100vh;
		background: #F2F2F2;
		overflow-x: hidden;
		overflow-y: auto;
	}

	.circleList,
	.circleContent {
		width: 100%;
		padding: 30upx;
	}

	.circleTitle {
		width: 100%;
		text-align: left;
		color: #666666;
		margin-bottom: 20upx;
	}

	.circleContent {
		background: #FFFFFF;
		color: #333333;
		overflow: hidden;
	}

	.circleContent .leftImage {
		width: 100upx;
		height: 100upx;
		float: left;
	}

	.circleContent .audio {
		width: 50%;
		position: relative;
	}

	.audioImage {
		width: 100%;
	}

	.audio text {
		position: absolute;
		right: 10upx;
		z-index: 5;
		color: #CCCCCC;
		font-weight: 100;
		transform: translateY(-50%);
		top: 50%;
	}

	.circleRigth {
		float: right;
		width: 480upx;
	}

	.ImgCont {
		overflow-y: hidden;
		overflow-x: auto;
		white-space: nowrap;
		margin-top: 10upx;
		margin-right: -10upx;
	}

	.ImgCont image {
		width: calc(33.33% - 5px);
		margin-right: 5px;
		display: inline-block;
		height: 200upx;
	}
</style>
